import QtQuick 2.0

Rectangle {

    id: root

    property var wheelPosi: 0
    property var wheelPosiNum: 9                                                // 盘子能放几个玻璃瓶
    property var pi: Math.PI
    property real wheelAngle: 0
    anchors.fill: parent

    radius: 5*dp

    color: Qt.rgba(233/255, 230/255, 224/255, 1)

    function startAnimation(){
        timer.start()
    }
    function stopAnimation(){
        timer.stop()
    }

    // 绘制处理 =======================================================================================
    Timer{
        id: timer
        interval: 20
        repeat: true
        onTriggered: {
            if(root.visible){
                updateState()
                refresh()
            }

        }
    }
    function updateState(){
        let res = CAnimation.requestInfo(0)
        setWheelPosi(res["WheelPosi"])
    }
    function setWheelPosi(posi){
        wheelPosi = posi
        let bias = 0.38*pi       // 修正值
        wheelAngle = pi*2* posi/wheelPosiNum + bias
    }
    function refresh(){
        canvas.requestPaint()
    }

    // rb: 大圆的半径  rs: 黑圆的半径  rc: 中心的圆的半径
    function drawWheel(ctx, x0, y0, rb, rs, rc1, rc2, curAngle, posiNum){

        let gapAngle = 2*Math.PI / wheelPosiNum


        // 外面的圆
        ctx.strokeStyle = "#333333"
        ctx.lineWidth = 1.5
        ctx.beginPath()
        ctx.arc(x0, y0, rb, 0, Math.PI*2)
        ctx.fillStyle = Qt.rgba(207/255, 207/255, 207/255, 1)
        ctx.fill()
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(x0, y0, rc2+rs+2, 0, Math.PI*2)
        ctx.fillStyle = Qt.rgba(217/255, 217/255, 217/255, 1)
        ctx.fill()
        ctx.stroke()

        // 小圆
        var sCenterX = []
        var sCenterY = []
        for(let i = 0; i < posiNum; i ++){
            ctx.beginPath()
            let angle = (2*pi - gapAngle*i + curAngle) > 2*pi ? (2*pi - gapAngle*i + curAngle) - 2*pi : (2*pi - gapAngle*i + curAngle)
            sCenterX.push(rc2 * Math.cos(angle)+x0)
            sCenterY.push(-rc2 * Math.sin(angle)+y0)
            ctx.arc(sCenterX[i], sCenterY[i], rs, 0, Math.PI*2)
            ctx.fillStyle = "#333333"
            ctx.fill()
            // 孔位里的字
            ctx.fillStyle = "white"
            ctx.font = "24px serif"
            ctx.fillText((i+1).toString(), sCenterX[i]-6, sCenterY[i]+6)
        }
        // 中心的圆
        ctx.strokeStyle = "#333333"
        ctx.lineWidth = 1.2
        ctx.beginPath()
        ctx.arc(x0, y0, rc1+2, 0, Math.PI*2)
        ctx.stroke()
        ctx.beginPath()
        ctx.arc(x0, y0, rc1-2, 0, Math.PI*2)
        ctx.fillStyle = Qt.rgba(233/255, 230/255, 224/255, 1)
        ctx.fill()
        ctx.stroke()


    }
    // 传入瓶盖的坐标
    function drawBcg(ctx, x, y, width, height){
        ctx.drawImage("qrc:/picture/wheel_bcg.png", x-0.27*width, y-0.685*height, width, height)
    }

    Canvas{
        id: canvas
        x: parent.width * 0.08
        y: parent.height * 0.07
        width: parent.width * 0.85
        height: parent.height * 0.85
        onPaint: {
            var ctx = canvas.getContext("2d")
            // 清空画布
            ctx.fillStyle = Qt.rgba(233/255, 230/255, 224/255, 1)
            ctx.fillRect(0, 0, width, height)

            let rb = Math.min(width, height)*0.25
            let rs = Math.min(width, height)*0.038
            let rc1 = Math.min(width, height)*0.1
            let rc2 = Math.min(width, height)*0.18
            let cx = width*0.35, cy = height*0.6
            drawWheel(ctx, cx, cy, rb, rs, rc1,  rc2, wheelAngle, 9)
            drawBcg(ctx, cx+rc2*Math.cos(0.39*Math.PI), cy-rc2*Math.sin(0.39*Math.PI), Math.min(width, height)*0.76, Math.min(width, height)*0.46)
        }

    }

}
